import React, { PureComponent } from "react";
import s from "./index.scss";
import Link from "components/Link";
import Progress from "antd/lib/Progress";
import { Flex } from "antd-mobile";
export default class extends PureComponent {
  constructor(props) {
    super(props);

    this.state = {
    };
    this.filterCircle = this.filterCircle.bind(this);
    this.tipStr = this.tipStr.bind(this);
    
  }
  
  

  filterCircle(item) {
    item.progress = parseInt(item.progress)
    if (item.loanStatus=='500'&&item.status == "100") {
      return (
        <Progress
          className={`blueCircle`}
          width={60}
          type="circle"
          percent={`${parseInt(item.progress)}`}
          format={percent =>
            percent - 0 == 100 ? `满` : `${percent.split(".")[0]}%`
          }
        />
      );
    } else if (item.loanStatus=='500'&&item.status == "200") {
      return (
        <Progress
          className={`greenCircle`}
          width={60}
          type="circle"
           percent={`${parseInt(item.progress)}`}
          format={percent =>
            percent - 0 == 100 ? `还` : `${percent.split(".")[0]}%`
          }
        />
      );
    } else if (item.loanStatus == "550") {
      return (
        <Progress
          className={`blackCircle`}
          width={60}
          type="circle"
          percent={100}
          format={percent =>
            `逾`
          }
        />
      );
    } else {
      return (
        <Progress
          className={`wanCircle`}
          width={60}
          type="circle"
          percent={`${parseInt(item.progress)}`}
          format={percent =>
            percent - 0 == 100 ? `完` : `${percent.split(".")[0]}%`
          }
        />
      );
    }
  }
  p(s) {
    return s < 10 ? "0" + s : s;
  }
  tipStr(item) {
    if (item.status == "300") {
      return <div className={`tip1`}>募集中</div>;
    } else if (item.status == "400") {
      return <div className={`tip1`}>募集中</div>;
    } else if (item.status == "500") {
      return <div className={`tip2`}>还款中</div>;
    } else {
      return <div className={`tip3`}>还款完成</div>;
    }
  }
  componentDidMount() {
   
 
  }

 

  render() {
    let { item } = this.props;
    let str 
    return (
      <div id={`timeOut${item.loanId}`}>
        <Link
          key={Date.now()}
          style={{ display: "block" }}
          href={{ pathname: `/projectList/AssignmentDetail/${item.loanId}` }}
        >
          <div className={`${s.itemBox}`} >
            <div className={`${s.Top}`}>
              <div className={`${s.TopOne}`}>
                <div className={`${s.annualrate}`}>
                  {item.annualInterestRate}
                  <span>%</span>
                </div>
                <div>实际收益率</div>
              </div>
              <div className={`${s.TopTwo}`}>
                <div className={`${s.term}`}>{item.distanceTime}</div>
                <div>剩余期限</div>
              </div>
              <div id={`${item.loanId}body`} className={`${s.TopThree}`}>
              
                  {this.filterCircle(item)}
              </div>
            </div>
            <div className={`${s.Bottom}`}>
              <div className={`${s.BottomOne}`}>
                <span className={`${s.title}`}>{item.title}</span>&nbsp;
                <span
                  className={`${s.ic_b}`}
                >
                  保
                </span>
                {item.loanType=="2"?<span
                  className={`${s.ic_c}`}
                >
                  押
                </span>:null}
              </div>
              <div className={`${s.BottomTwo}`}>
                <span className={`${s.openTime}`}>
                  {item.openTime == "" ? "按期付息，到期还本" : item.openTime}
                </span>
              </div>
            </div>
          </div>
          <Flex className={`block05`} />
        </Link>
      </div>
    );
  }
}
